<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>健康管理报告</title>
    <style>
        @page{
            @bottom-left {
                content: element(footer);
                vertical-align: top;
                padding-top: 10px;
                /*      border: solid red;    */
            }

            @top-right {
                content: element(header);
                vertical-align: bottom;
                padding-bottom: 10px;
                /*          border: solid green;   */
            }

            size: A4 portrait;
            /*margin-top:5.5cm;
            margin-left:1cm;
            margin-right:1cm;
            margin-bottom:3.3cm;*/
        }
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            width: 980px;
            height: 100%;
            background: #ffffff;
        }
        .page .page1top, .page1top img{
            width: 100%;
            height: 194px;
        }
        .page .page1title{
            width: 406px;
            margin: 50px auto;
        }
        .page .page1bot{
            width: 100%;
            height: 92px;
            background: #335eea;
            color: #ffffff;
            text-align: center;
            border-top: 10px solid #ffffff;
        }
        .page1bot_info{
            margin-top: 20px;
            margin-bottom: 10px;
            text-align: center;
        }
        .page1bot-line{
            width: 100%;
            height: 20px;
            background: #335eea;
        }
        .page .page1info{
            width: 610px;
            margin: 100px auto 200px;
        }
        .page .page1infoli{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .page .page1infoli .page1info_label{
            font-size: 28px;
            color: #656565;
            text-align: justify;
            text-align-last: justify;
            width: 130px;
            height: 70px;
            line-height: 90px;
        }
        .page .page1infoli .page1info_value{
            font-size: 28px;
            color: #000000;
            border-bottom: 1px solid #808080;
            width: 455px;
            height: 70px;
            line-height: 90px;
            text-align: left;
            margin-left: 40px;
        }

    </style>
</head>
<body>
    <div class="page">
        <div class="page1top"><img src="page1top.png" alt="" /></div>
        <div style="margin-top: 100px"><img style="margin-left: 150px;" src="page1title.png" alt="" /></div>
        <div class="page1info">
            <div class="page1infoli"><div class="page1info_label">编号 </div><div class="page1info_value">155834564564545</div></div>
            <div class="page1infoli"><div class="page1info_label">姓名 </div><div class="page1info_value">黄卫平</div></div>
            <div class="page1infoli"><div class="page1info_label">性别 </div><div class="page1info_value">男</div></div>
            <div class="page1infoli"><div class="page1info_label">年龄 </div><div class="page1info_value">27</div></div>
            <div class="page1infoli"><div class="page1info_label">证件号码 </div><div class="page1info_value">44145456456456456456x</div></div>
            <div class="page1infoli"><div class="page1info_label">手机号码 </div><div class="page1info_value">155456456515</div></div>
            <div class="page1infoli"><div class="page1info_label">体检日期 </div><div class="page1info_value">2019-05-23</div></div>
        </div>
        <div class="page1bot-line"></div>
        <div class="page1bot">
            <div class="page1bot_info">提示：您本次的测量结果仅供健康评估参考，不作为医疗诊断依据！</div>
            <div class="page1bot_info_address">地址：</div>
        </div>

    </div>
    
</body>
</html>